<template>
  <div>
    <div class="header">
      乌海及周边污染源成因大数据分析
      <a
        target="_blank"
        :href="homeUrl"
        class="a-access"
      >
        <button class="button type1">进入系统</button>
      </a>
    </div>
    <!--主体-->
    <div class="main clearfix">
      <div class="main-left">
        <div class="border-container">
          <div class="name-title">
            ===
          </div>
          <div id="radar"></div>
          <span class="top-left border-span"></span>
          <span class="top-right border-span"></span>
          <span class="bottom-left border-span"></span>
          <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
          <div class="name-title">
            ===
          </div>
          <div id="graduateyear"></div>
          <ul class="three-pie clearfix">
            <li>
              <div id="sexrate"></div>
            </li>
            <li>
              <div id="householdrate"></div>
            </li>
          </ul>
          <span class="top-left border-span"></span>
          <span class="top-right border-span"></span>
          <span class="bottom-left border-span"></span>
          <span class="bottom-right border-span"></span>
        </div>
      </div>
      <div class="main-middle">
        <div class="border-container">
          <ul class="teacher-pie clearfix">
            <li>

              <div id="courserate">

              </div>
            </li>
            <li>

              <div id="professionrate"></div>
            </li>
          </ul>
            <!--地图组件-->
            <OpenLayerMap :mapHeight='contentHeight-2'></OpenLayerMap>
          <span class="top-left border-span"></span>
          <span class="top-right border-span"></span>
          <span class="bottom-left border-span"></span>
          <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div id="mapadd"></div>
            <div class="number-show">
                <ul>
                    <li>
                        <span class="span-name">第一标准</span>
                    </li>
                    <li>
                        <span class="span-number-show">653</span>
                    </li>
                    <li>
                        <span class="span-name">第二标准</span>
                    </li>
                    <li>
                        <span class="span-number-show">836252</span>
                    </li>
                    <li>
                        <span class="span-name">第三标准</span>
                    </li>
                    <li>
                        <span class="span-number-show">32162</span>
                    </li>
                </ul>
            </div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
      </div>
      <div class="main-right">
        <div class="border-container">
          <div class="name-title">
            ===
          </div>
          <table class="table table-kingdargen">
            <thead>
              <tr>
                <th>test1</th>
                <th>test2</th>
                <th>test3</th>
                <th>test4</th>
                <th>test5</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>a</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>b</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>c</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>d</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>e</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>f</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>g</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>h</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>i</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>k</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>k</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>k</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
              <tr>
                <td>k</td>
                <td>268</td>
                <td>212</td>
                <td>342</td>
                <td>256</td>
              </tr>
            </tbody>
          </table>
          <span class="top-left border-span"></span>
          <span class="top-right border-span"></span>
          <span class="bottom-left border-span"></span>
          <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
          <div class="name-title">===</div>
          <div id="juniorservice"></div>
          <span class="top-left border-span"></span>
          <span class="top-right border-span"></span>
          <span class="bottom-left border-span"></span>
          <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
          <div class="name-title">
            ===
          </div>
          <div id="edubalance"></div>
          <span class="top-left border-span"></span>
          <span class="top-right border-span"></span>
          <span class="bottom-left border-span"></span>
          <span class="bottom-right border-span"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import './index.css';
import OpenLayerMap from '../../components/OpenLayerMap.vue';
let config = require('../../config/config');
export default {
  name: 'detail',
  components: {
    OpenLayerMap,
  },
  data() {
    return {
      homeUrl: config.HOME_URL,
      contentHeight:0,
    };
  },
  mounted: function() {
    let w_width=document.documentElement.clientHeight;
    this.contentHeight=w_width-500;

  },
};
</script>